<template>
  <div class="container personalInformation">
    <THeader :active="this.$route.path"></THeader>
    <!--登录成功页面模块-->
    <el-row style="padding-top: 100px">
      <el-col :span="10" :offset="7">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h2 style="margin: 0">个人信息</h2>
          </div>
          <el-form :model="informationForm" label-width="100px"  　style="padding-right: 80px">
            <el-form-item label="用户名： " prop="username">
              <el-input v-model="informationForm.username" auto-complete="true"></el-input>
            </el-form-item>
            <el-form-item label="邮箱： " prop="email">
              <el-input v-model="informationForm.email" auto-complete="true"></el-input>
            </el-form-item>
            <div style="padding-top: 20px;text-align: center">
              <el-button  style="width: 120px" size="large" type="primary" @click="savepsonalinformation">提交修改</el-button>
            </div>
            <el-button type="text"  @click="dialogVisible = true">修改密码</el-button>
            <div>
            </div>
            <el-dialog
              :visible.sync="dialogVisible"
              width="400px"
              :append-to-body="true" >
              <div slot="title" :style="{fontSize:'16px',lineHeight:'24px'}">
                <i class="el-icon-edit-outline"></i>
                <span>修改密码</span>　
                <Divider :distance="10"/>
              </div>
              <el-form :model="passportForm" :rules="rules" ref="ruleForm">
                <el-form-item label="原密码：" :label-width="formLabelWidth">
                  <el-input  v-model="passportForm.password"   auto-complete="off" :style="{width:'200px'}"></el-input>
                </el-form-item>
                <el-form-item label="确认密码：" :label-width="formLabelWidth">
                  <el-input   v-model="passportForm.qpassword"   auto-complete="off" :style="{width:'200px'}"></el-input>
                </el-form-item>
                <el-form-item label="新密码：" :label-width="formLabelWidth">
                  <el-input  v-model="passportForm.newpassword"   auto-complete="off" :style="{width:'200px'}"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
    <el-button @click= "dialogVisible =false">取 消</el-button>
    <el-button type="primary" @click="passport">确 定</el-button>
  </span>
            </el-dialog>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { passportServer } from "../../api/user";
import {personalinformationServer} from "../../api/user"; 

export default {
  name: "personalInformation",
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passportForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
     formLabelWidth: '100px',
      informationForm:[   ],
      dialogVisible: false,
      passportForm: {  
        password:"",
        qpassword:"",
        newpassword:"",	
		},
      rules: {
        qpassword: [{ validator: validatePass, trigger: "blur" }]
      }
    };
  },
  
    mounted() {
    console.log("我应该后");
    this.getpersonalinformation();
  },
  methods: {
    passport() {
      //修改密码
        this.$refs["ruleForm"].validate(valid => {
          const {  password, qpassword,newpassword } = this.passportForm;
          if (valid) {
            passportServer("put", {  password, newpassword  }).then(
              suc => { 
        const { code, message } = suc.data; 
		  if (code) {
            this.$message({
              type: "success",
              message
            }); 
		  this.dialogVisible =false;
          } else {
            this.$message({
              type: "error",
              message
            });
          }
      },
	      err => {
          this.$message({
            type: "error",
            message: err.message
          }); }
            );
          }
        }); 
    },
    getpersonalinformation(){
      //获取个人信息
     personalinformationServer("get").then(
	   suc => { 
        const { code,data,message } = suc.data;  
              this.informationForm=data; 
		  if (code) {
            this.$message({
              type: "success",
              message
            }); 
          } else {
            this.$message({
              type: "error",
              message
            });
          }
      },
	      err => {
          this.$message({
            type: "error",
            message: err.message
          });
		  } 
      )},
  savepsonalinformation(){
    //修改个人信息
     personalinformationServer("put", {
        ...this.informationForm}
    ).then(
      suc => { 
        const { code, message } = suc.data; 
		  if (code) {
            this.$message({
              type: "success",
              message
            }); 
          } else {
            this.$message({
              type: "error",
              message
            });
          }
      },
	      err => {
          this.$message({
            type: "error",
            message: err.message
          });
        }
    );
  }
  }
};
</script>

<style scoped>

</style>
